<template>
  <div class="content">
    <pageHeaderNew title="收藏"></pageHeaderNew>
    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="输入文件名称搜索"
            style="margin-bottom: 8px; max-width: 240px"
            v-model="searchName"
            @search="search"
          />
        </a-space>
      </div>
    </div>
    <div class="table-box">
      <TableTurn :tableData="getTableData" ref="tableRef" :args="args">
        <a-table-column :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="useFileName" title="文件名称">
          <template #cell="{ record }">
            <a-input
              v-if="isShow && record.id === setFileData.id"
              :style="{ width: '320px' }"
              placeholder="Disabled status"
              v-model="setFileName"
              :error="isError"
              @change="changeFileName"
            />
            <div
              v-else
              style="
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              "
            >
              {{ record.useFileName.split('.')[0] }}
            </div></template
          >
        </a-table-column>

        <a-table-column :width="200" data-index="fileType" title="文件类型">
        </a-table-column>
        <a-table-column :width="200" data-index="" title="收藏者">
        </a-table-column>
        <a-table-column :width="200" data-index="" title="操作">
          <template #cell="{ record }">
            <!-- <a-button type="text" @click="setPreview(record)">预览</a-button> -->
            <a-space v-if="record.fileName" :size="20">
              <a-tooltip content="分享">
                <icon-font
                  type="icon-fenxiangfangshi"
                  :size="19"
                  :style="{
                    cursor: 'pointer'
                  }"
                  @click="goShare(record)"
                />
              </a-tooltip>
              <a-tooltip :content="record.topState === 1 ? '取消置顶' : '置顶'">
                <icon-font
                  @click="setTopping(record)"
                  type="icon-chuangti-zhiding"
                  :size="20"
                  :style="{
                    cursor: 'pointer',
                    color: record.topState === 1 ? 'f9ca1f' : ''
                  }"
                />
              </a-tooltip>
              <a-tooltip content="更多操作">
                <a-dropdown>
                  <icon-font
                    type="icon-more-def"
                    :size="26"
                    :style="{
                      cursor: 'pointer'
                    }"
                  />
                  <template #content>
                    <a-doption @click="openTabs(record)"
                      >新标签页打开</a-doption
                    >
                    <a-doption @click="copy(record)">复制链接</a-doption>
                    <a-doption @click="goRename(record)">重命名</a-doption>
                    <a-doption @click="setTopping(record)">{{
                      record.topState === 1 ? '取消置顶' : '置顶'
                    }}</a-doption>
                    <a-doption @ok="delFile(record)">取消收藏</a-doption>
                  </template>
                </a-dropdown>
              </a-tooltip>
            </a-space>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
  </div>

  <!-- <FilePreview
    v-model:visible="PreviewModelVisible"
    ref="previewFileRef"
    v-if="previewFile.fileShow"
    :file="previewFile.fileMessage"
    @downLoadFile="downLoadFile"
  >
  </FilePreview> -->
  <ShareModel
    v-if="shareModelVisible"
    v-model:visible="shareModelVisible"
    :sharingInfo="SharingInfo"
  ></ShareModel>
</template>

<script lang="ts" setup>
import {
  getCollectList,
  delFileCollect,
  putFileName,
  putFileTopping
} from '@/apis/document/documentCenter/index';
import { Message } from '@arco-design/web-vue';
import ShareModel from '../components/share.vue';
import useClipboard from 'vue-clipboard3';
import { color } from 'echarts';

const SharingInfo = ref();
const router = useRouter();
const searchName = ref('');
const tableRef = ref();
const userId = Number(localStorage.getItem('userId'));
const getTableData = async (page: any) => {
  try {
    const msg: any = {};
    if (searchName.value) msg.name = searchName.value;
    const res = await getCollectList({ ...page, userId, ...msg });
    return Promise.resolve(res);
  } catch (err: unknown) {
    console.log(err);
  }
};

const shareModelVisible = ref(false);

const previewFile = reactive({
  fileShow: false,
  fileMessage: {
    id: '',
    fileName: '',
    downloadUrl: ''
  }
});
const PreviewModelVisible = ref(false);

const setPreview = (val: any) => {
  previewFile.fileMessage.id = val.id;
  previewFile.fileMessage.fileName = val.fileName;
  previewFile.fileMessage.downloadUrl = val.downloadPath;
  previewFile.fileShow = true;
  PreviewModelVisible.value = true;
};

const search = () => {
  tableRef.value.loadData();
};

const delFile = async (res: any) => {
  try {
    const ids = [res.id];
    await delFileCollect({ ids: ids.join() });
    tableRef.value.loadData();
  } catch (err: unknown) {
    console.log(err);
  }
};

const { toClipboard } = useClipboard();
const copy = async (res) => {
  try {
    await toClipboard(res.downloadPath);
    Message.success('复制成功');
  } catch (err: unknown) {
    console.log(err);
  }
};
const setFileName = ref();
const isShow = ref(false);
const fileType = ref();
const setFileData = ref();
const isError = ref(false);
const goRename = async (res: any) => {
  setFileName.value = res.useFileName.split('.')[0];
  fileType.value = res.useFileName.split('.')[1];
  setFileData.value = res;
  isShow.value = true;
  console.log(setFileData.value, fileType.value, setFileName.value);
};

const changeFileName = async (e: string) => {
  try {
    if (setFileName.value === '') {
      isError.value = true;
      return;
    }
    await putFileName({
      useFileName: `${setFileName.value}.${fileType.value}`,
      id: setFileData.value.id
    });
    tableRef.value.loadData();
    setFileName.value = undefined;
    fileType.value = undefined;
    setFileData.value = undefined;
    isShow.value = false;
    isError.value = false;
  } catch (err: unknown) {
    console.log(err);
  }
};

const openTabs = (res: any) => {
  router.push({ name: 'FileTabsPage', query: { url: res.downloadPath } });
};

const setTopping = async (res: any) => {
  try {
    await putFileTopping({ id: res.id });
    tableRef.value.loadData();
  } catch (err: unknown) {
    console.log(err);
  }
};

const goShare = (res: any) => {
  shareModelVisible.value = true;
  SharingInfo.value = res;
};
</script>

<style scoped lang="less">
.content {
  padding: 10px;
  height: 100%;
  width: 100%;
}

.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}
</style>
